<template>
	<view class="advertisement-card-container">
		<view class="advertisement-card">
			<view class="advertisement-card-data">
				<view class="advertisement-card-title">
					{{title}}
				</view>
				<view class="advertisement-imgs-container">
					<image v-for="(img, index) in imgUrl" :key="index" class="advertisement-imgs" :src="img" @error="handleImgError()" mode="aspectFill"></image>
					
				</view>

				<view class="advertisement-card-info">
					<view class="advertisement-card-info-left">
						<view>{{author}}</view>
					</view>
					<view class="advertisement-card-info-right">
						2025.10.25
					</view>
				</view>
				<slot name="tips"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cardViewText",
		data() {
			return {};
		},
		methods:{
			handleImgError(){
				console.log(123);
			}
		},
		computed:{
			loadImg(){
				
			}
		},
		props: {
			title: {
				type: String
			},
			isTop: {
				type: Boolean
			},
			author: {
				type: String
			},
			imgUrl: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style>
	.advertisement-card-container {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.advertisement-card {
		height: 90%;
		width: 95%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10rpx 0 10rpx 0;
	}

	.advertisement-card-data {
		width: 90%;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.advertisement-card-title {
		font-weight: bold;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
	}

	.advertisement-imgs-container {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 200rpx;
	
	}

	.advertisement-imgs {
		height: 90%;
		border-radius: 20rpx;
		width: 30%;
	}

	.advertisement-card-info {
		width: 100%;
		display: flex;
		justify-content: space-between;
		color: #a3a3a3;
		font-size: 24rpx;
	}

	.advertisement-card-info-left {
		display: flex;
	}

	/* 给所有子元素添加右侧间隔，最后一个子元素除外 */
	.advertisement-card-info-left>view:not(:last-child) {
		/* 固定间隔值 */
		margin-right: 10px;
	}
</style>